<template>
  <div>
    <div ref="editor" :style="styleObject" ></div>
  </div>
</template>

<script>
import E from 'wangeditor'
import { getToken } from "@/utils/auth";
// const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E

export default {
  name: 'editor',
  props: ['id', 'value', 'width', 'height', 'disabled', 'menus', 'mapKey', 'menuFixed', 'pasteFilter', 'codeDefaultLang', 'hideLinkImg', 'uploadParams', 'uploadHeaders', 'isRealtime', 'disabledMenus','uploadVideoServer'],
  data () {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken()
      },
      styleObject: {
        width:this.width,
        height: this.height
      },
      editor: null
    }
  },
  methods: {
    createEditor() {
      let _this  = this
      this.editor = new E(this.$refs.editor)
      this.editor.config.pasteFilter = false
      this.editor.config.width = this.width
      this.editor.config.height = this.height
      this.editor.config.uploadImgServer  = this.uploadUrl//配置上传地址
      this.editor.config.uploadImgHeaders = this.uploadHeaders //配置header头
      this.editor.config.uploadFileName  = 'image'//配置上传参数
      this.editor.config.showLinkImg = true //隐藏插入网络图片
      this.editor.config.uploadImgShowBase64 = false//开启64位上传
      this.editor.config.uploadImgTimeout =  5 * 1000//配置上传超时时间
      this.editor.config.uploadImgHooks = {
        // 图片上传并返回了结果，图片插入已成功
        success: function(xhr) {
          console.log('success', xhr)
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function(xhr, editor, resData) {
          console.log('fail', resData)
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function(xhr, editor, resData) {
          console.log('error', xhr, resData)
        },
        // 上传图片超时
        timeout: function(xhr) {
          console.log('timeout')
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function(insertImgFn, result) {
          // result 即服务端返回的接口
          // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
          insertImgFn(result.data)
        }
      }
      //上传视频配置
      this.editor.config.uploadVideoServer = this.uploadVideoServer
      this.editor.config.uploadVideoHeaders = this.uploadHeaders
      this.editor.config.uploadVideoName  = 'file'
      this.editor.config.showLinkVideo = true //显示插入网络视频

      this.editor.config.uploadVideoHooks = {
        // 视频上传并返回了结果，视频插入已成功
        success: function(xhr) {
          console.log('success', xhr)
        },
        // 视频上传并返回了结果，但视频插入时出错了
        fail: function(xhr, editor, resData) {
          console.log('fail', resData)
        },
        // 上传视频出错，一般为 http 请求的错误
        error: function(xhr, editor, resData) {
          console.log('error', xhr, resData)
        },
        // 上传视频超时
        timeout: function(xhr) {
          console.log('timeout')
        },

        // 视频上传并返回了结果，想要自己把视频插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: { url : '.....'} } 这种格式，可使用 customInsert
        customInsert: function(insertVideoFn,result) {
          //     // result 即服务端返回的接口
          //     // insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可
          //     // insertVideoFn(result.data)
          // insertVideoFn(result.data)
          // _this.editor.cmd.do('insertHTML',`<p><video src="${result.data}" style="max-width:100%" controls="controls"></video>视频</p>`)
          _this.editor.cmd.do('insertHTML',`<p><iframe src="${result.data}" frameborder='0' allow='autoplay;encrypted-media' allowfullscreen style='width:300px;height:200px;'></iframe></p>`)

        }
      }

      if (this.mapKey != undefined) {
        // 配置地图key，默认空
        this.editor.config.mapAk = this.mapKey
      }
      if (this.menus != undefined && this.menus instanceof Array && this.menus.length) {
        // 配置菜单，默认全部，对source进行过滤
        this.editor.config.menus = this.filterMenu(this.menus)
      } else if (this.disabledMenus) {
        // 禁用菜单
        this.editor.config.menus = this.filterDisabledMenu(this.editor.config.menus, this.disabledMenus)
      } else {
        this.editor.config.menus = this.filterMenu(this.editor.config.menus)
      }
      if (this.menuFixed != undefined) {
        // 配置菜单栏吸顶，默认true
        this.editor.config.menuFixed = this.menuFixed
      }
      if (this.pasteFilter != undefined) {
        // 配置粘贴过滤，默认为false
        this.editor.config.pasteFilter = this.pasteFilter
      }
      if (this.codeDefaultLang != undefined) {
        // 默认代码类型，默认javascript
        this.editor.config.codeDefaultLang = this.codeDefaultLang
      }
      this.editor.create()

      if (this.value) {
        this.setHtml(this.value)
      }
      if (this.disabled) {
        this.disable()
      }
      this.listenChange()
    },
    // 筛选编辑器菜单
    filterMenu(menus) {
      if (menus instanceof Array) {
        return menus.map((item, key) => {
          if (item === 'source') {
            return null
          }
          return item
        })
      }
    },
    // 筛选不可用菜单
    filterDisabledMenu(menus, disabledMenus) {
      let menusToString = menus.join(',')
      disabledMenus.forEach((res) => {
        menusToString = menusToString.replace(res, '').replace(',,', ',')
      })
      if (menusToString.length && menusToString[0] == ',') {
        menusToString.substr(1, menusToString.length)
      }
      return menusToString.split(',')
    },
    insertImg(url) {
      this.editor.command(null, 'insertHtml', '<img src=' + url + ' style="max-width:100%;"/>')
    },

    // 获取内容(html)
    getHtml() {
      return this.editor.txt.html()
    },
    // 获取内容(纯文本)
    getText() {
      return this.editor.txt.text()
    },
    // 设置内容(html)
    setHtml(text) {
      this.editor.txt.html(text)
    },
    // 追加内容(html)
    appendHtml(text) {
      this.editor.txt.append(text)
    },
    // 清空内容
    clear() {
      this.editor.clear()
    },
    // 启用编辑器
    enable() {
      this.editor.enable()
    },
    // 禁用编辑器
    disable() {
      this.editor.disable()
    },
    // 销毁编辑器
    destroy() {
      this.editor.destroy()
    },
    // 恢复编辑器
    undestroy() {
      this.editor.undestroy()
    },
    // 监听内容改变
    listenChange() {
      this.editor.onchange = () => {
        this.$emit('change')
        let result = ''
        if (!this.getText()) {
          result = this.getHtml()
        }
        if (this.isRealtime !== false) {
          this.$emit('input', result)
        }
      }
    },

  },
  mounted() {
    this.createEditor()
    //   class AlertMenu extends BtnMenu {
    //       constructor(editor) {
    //         // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
    //           const $elem = E.$(
    //               `<div class="w-e-menu" data-title="excell">
    //                   <i class="el-icon-folder-add"></i>
    //               </div>`
    //           )
    //           super($elem, editor)
    //       }

    //       // 菜单点击事件
    //       clickHandler() {
    //           // 做任何你想做的事情
    //           // 可参考【常用 API】文档，来操作编辑器
    //           console.log(this.editor)
    //           console.log(this.editor.toolbarElemId)


    //       }
    //       // 菜单是否被激活（如果不需要，这个函数可以空着）
    //       // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
    //       // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
    //       tryChangeActive() {
    //           // 激活菜单
    //           // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
    //           // 2. this.this.isActive === true
    //           this.active()
    //           // // 取消激活菜单
    //           // // 1. 菜单 DOM 节点会删掉 .w-e-active
    //           // // 2. this.this.isActive === false
    //           // this.unActive()
    //       }
    // }
    //  const menuKey = 'alertMenuKey'
    //  E.registerMenu(menuKey, AlertMenu)
  },
  created(){

  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  }
}
</script>


<style scoped>


</style>

